<template>
    <div style="display: flex;height: 100vh; flex-direction: column; justify-content: center;align-items: center;"> 
        <div>
             <el-input
                v-model="input"
                style="width: 240px"
                placeholder="请输入实体类名称"
             />
             <div style="margin-top: 10%;">
                <el-button type="primary" size="small" @click="handleGenerate">AI生成属性值</el-button>
             </div>
        </div>
    </div>
</template>

<script setup>
import { ref, inject } from 'vue';
import {mainStore} from '../store/index'
const $post = inject('$post');
const input = ref('');
import { useRouter } from 'vue-router';
const router = useRouter();
let loadingInstance = null; // 用于存储加载动画的实例
const store=mainStore()




//加载样式
const openFullScreen = () => {
  loadingInstance = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
};

const closeFullScreen = () => {
  if (loadingInstance) {
    loadingInstance.close();
  }
};

const handleGenerate = () => {
    if (input.value.trim() === '') { // 注意这里使用了input.value来获取ref的值
    ElMessage.error('请输入数据');
    return; // 确保使用分号结束语句
  }
  openFullScreen(); // 点击按钮时启动加载动画
  GetAtribute()
    .then(() => {
      
    })
    .catch((error) => {
      console.error('请求失败:', error);
    })
    .finally(() => {
      closeFullScreen(); // 无论成功或失败，都关闭加载动画
    });
};

const GetAtribute = () => {
  return $post("/sql-helper/generation", { value: input.value }, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  })
  .then((res) => {
    let lines = res.data.split('\n');
    //去除空格
    lines = lines.filter(line => line.trim() !== '');

    let fields = lines.map(line => {
    let [key, value] = line.split(' - ').map(item => item.trim());
    return { key, value };
    });
    
    fields.map(field => {
      return {
        [field.key]: field.value
      };
    });
    store.fields=fields
    console.log("@@",store.fields)
    console.log(fields)
    router.push({
        name: 'home',
        // query: { fields: JSON.stringify(fields) } 
      });

    
    
  });
};
</script>